<template>
<div>

	<div class="bbg1">
		<div class="title2">
			<div class="shuxian2"></div>
			<div class="wenzi2">
				人员在线情况
			</div>
		</div>
	</div>

	<el-container class="bbg1 pl45">
		<el-aside style="width:225px;height:881px;background:rgba(7,65,78,1);">
			<el-tree :data="treedata" 
			:expand-on-click-node="false"
			class="tree"
			node-key="grid_id"
			:props="props1"
			v-if="showTree"
			:indent="20"
			:default-expanded-keys="defaultExpandedKeys"
			style="background:rgba(7,65,78,1);"
			@node-click="showUser"
			>
				<span class="custom-tree-node" slot-scope="{ node, data }">
			        <span>{{ node.label }}</span>
			        <span>
			        	
			        </span>
		        </span>

			</el-tree>

		</el-aside>



		<el-main style="padding:0px;height:860px;overflow-x:hidden;">

			<div class="t1">
				{{title}}
			</div>


			<div class="t2" >
				<el-row :gutter="10">
					<el-col :span="6" v-for="(item, index) in currentGride.peoplelist" >
						<div v-if="item.name != null" class="user" :class=" {huihua : item.status != '1'}">
<el-row>
	<el-col :span="8">
		<div class="text-center mt20">
			
			<img v-if="item.photo == null" src="../../assets/defaultuser.png" 
			width="56" height="56" style="border-radius:28px;">

			<img v-else :src="'/gridfile' + item.photo" 
			width="56" height="56" style="border-radius:28px;">
		</div>
	</el-col>
	<el-col :span="16">
		<div class=" white mt10" style="font-size:12px;">
			<div class="mt5 cc"><img src="../../assets/u1.png" width="10" height="10" class="mr5">人员名称 : {{item.name}}</div>
			<div class="mt5 cc"><img src="../../assets/u2.png" width="10" height="10" class="mr5">联系电话 : {{item.mobile}}</div>
			<div class="mt5 cc"><img src="../../assets/u3.png" width="10" height="10" class="mr5">所属网格 : {{item.company_name}}</div>
			<div class="mt5 cc"><img src="../../assets/u4.png" width="10" height="10" class="mr5">所属角色 : {{item.role_name}}</div>
		</div>
	</el-col>
</el-row>

<div class="mt15 text-center">
	<div style="width:203px;height:30px;margin:0 auto;">
		<div>
		<div style="width:50px;background:rgba(13,156,80,1);border:1px solid rgba(31, 231, 124, 1);border-radius:2px;padding:3px 0px;font-size:12px;color:#fff;float:left;">
			<span v-if="item.status == '1'">在线</span>
			<span v-else>离线</span>
		</div>
		<div style="width:150px;border-top:1px solid rgba(39,206,191,1);border-bottom:1px solid rgba(39,206,191,1);border-right:1px solid rgba(39,206,191,1);border-radius:2px;padding:3px 0px;font-size:12px;color:#12F87D;float:left;">
			<span v-if="item.status == '1'">
				在线时长：{{item.zxsc == null ? '未知' : item.zxsc}} 小时
			</span>
			<span v-else>
				离线时长：{{item.zxsc == null ? '未知' : item.zxsc}} 小时
			</span>
			
		</div>
		</div>
	</div>
</div>
						</div>

					</el-col>

				</el-row>
				
			</div>

		</el-main>

	</el-container>



<el-dialog
  :title="current.company_name"
  :visible.sync="dialogVisible"
  width="600px">
  
  	<el-tag 
	v-for="(item, index) in current.names" :key="index"
	:type="current.statues[index] == '1' ? 'success' : 'info'" 
	class="ml10 mb10"  >{{item}}</el-tag>

  	<br>
  	<br>

</el-dialog>

</div>
</template>

<script>


export default {
	
	name : 'test',
	
	data () {
		return {
		  	treedata : [],

		  	offsetheight : document.documentElement.clientHeight - 60 - 20 - 20,    //
			offsetwidth : document.documentElement.clientWidth - 200 - 50,
			props1 : {
				label : 'company_name',
			},
			showTree : false,
			top : {}, 

			dialogVisible : false,

			current : {},

			defaultExpandedKeys : [],

			title : '',

			show : false,

			currentGride : {},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		
	},

	methods : {
		changeImg (item) {
			console.log(item.photo == null ? '../../assets/defaultuser.png' : '/gridfile' + item.photo);

			return item.photo == null ? '../../assets/defaultuser.png' : '/gridfile' + item.photo;
		},

		init () {

			this.defaultExpandedKeys = [];

			this.$http({
				fun : 'staffonlinelist',
				cb : res => {
					console.log('staffonlinelist');
					console.log(res);

					res.forEach(item => {
						if(item.type == '1'){
							this.defaultExpandedKeys.push(item.grid_id);
						}
					})

					// res.forEach(item => {
					// 	item.names = [];
					// 	if(item.name != undefined){
					// 		item.name.split(',').forEach(n => {
					// 			item.names.push(n);
					// 		});
					// 	}
						
					// 	item.statues = [];
					// 	if(item.status != undefined){
					// 		item.status.split(',').forEach(n => {
					// 			item.statues.push(n);
					// 		});
					// 	}
					// });

					this.$http({
						fun : 'staffonlinelist1',
						cb : res1 => {
							console.log('staffonlinelist1');
							console.log(res1);

							const result = this.$util.transData(res, 'grid_id', 'parent_id', 'children');
							console.log(result);
							result[0].peoplelist = res1;
							// this.top = result[0];
							this.treedata = result;
							this.showTree = true;

							this.showUser(this.treedata[0]);

						}
					});


					

				}
			});




			



		},


		more (data) {
			console.log(data);
			this.current = data;
			this.dialogVisible = true;
		},

		showUser (item) {
			console.log(item);

			console.log('getPidGridName');

			if(item.grid_id == '1'){
				this.title = '所有网格';
			}else{
				this.$http({
					fun : 'getPidGridName',
					id : item.grid_id,
					cb : res => {
						console.log('res');
						console.log(res);
						this.title = res;
					}
				});
			}

			this.show = false;
			this.currentGride = item;
			this.$nextTick(() => {
				this.show = true;
			});

		},

	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    justify-content: flex-start;
    font-size: 14px;
    padding-right: 8px;
  }


.t1 {
	padding: 18px;
	/*width:1530px;*/
	height:25px;
	border:1px solid rgba(22,144,152,1);
	margin-left: 20px;
	color: #fff;
}

.t2 {
	/*padding: 18px;*/
	/*width:1565px;*/
	margin: 20px 0 20px 20px;
}

.user {
	/*width: 305px;*/
	height: 150px;
	background:rgba(22,144,152,1);
	box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.1);
	border-radius:5px;
	/*float: left;*/
	/*background-color: #aaa;*/
	/*margin-right: 10px;*/
	margin-bottom: 10px;


}

.huihua {
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
}
</style>
